<template>
  <div class="link-lib">

     <!--按钮组-->
      <div class="Btns-ctrl-body btns-under-box">

        <!--高级搜索-->
        <SearchPublic
          :searchObj="searchObj"
          @searchParams="searchParamsFn"
        ></SearchPublic>

        <!--<div class="search-ctrl f-l ">
          <input type="text" class="search-text" placeholder="搜索链接名称" v-model="searchStr">
          <button type="button" class="search-btn btn btn-info" @click="btnSearch(pageSize, 0)">搜索</button>
        </div>-->

        <div class="btns f-r">
          <button type="button"
            class="btn btn-info"
            @click="btnAdd" >
            新增
          </button>
          <button type="button"
            class="btn btn-warning"
            @click="btnRevise" >
            修改
          </button>
          <button type="button"
            class="btn btn-danger"
            v-show="isDeleteBtn"
            @click="btnDelete" >
            删除
          </button>
        </div>
      </div>
      <!--按钮组闭合-->
      <div class="table-ctrl">
        <!-- 链接组 -->
        <table-mate
          :tableData = picArr
          :headerTable = headerTable
          :clearCheckedAry = clearCheckedAry
          @checkedAryFn = checkedAryFn >
        </table-mate>
        <!-- 链接组闭合 -->
        <!-- 分页 -->
        <pages class="pages"
          :showItem = showItem
          :allpage = allpage
          :pageSize = pageSize
          :allDataSum = allDataSum
          @current-change = currentChange >
        </pages>
        <!-- 分页闭合 -->
      </div>


    <pic-dialog-add-revise :picDialogAddReviseShow = picDialogAddReviseShow
      :dialogObj="dialogObj"
      @dialogCloseFn="dialogCloseFn"
      @dialogSuccessFn = "dialogSuccessFn" >
    </pic-dialog-add-revise>
    <!-- 弹框 -->
    <msgDialog :dialogInit = msgDialogInit
      :dialogIsShow = msgDialogIsShow ></msgDialog>

    <isRealDialog :dialogInit = isRealDialogInit
      :dialogIsShow = isRealDialogShow
      @confirm = realDelete ></isRealDialog>

  </div>
</template>

<script>
import tableMate from 'sudoku/atom/tableMate'
import pages from 'sudoku/atom/pages';
import picDialogAddRevise from 'sudoku/atom/picDialogAddRevise';
import msgDialog from 'sudoku/atom/msgDialog';
import isRealDialog from 'sudoku/atom/isRealDialog';
import { getLinkTable, getLinkTableSearch, deletLink} from "@/api/matter"
import SearchPublic from "../../publicTemplate/search/SearchPublic"


  export default {
    name: 'LinkLib',
    props:{
      isDeleteBtn: {
        type: Boolean,
        default: true
      }
    },
    data (){
      return {
        clearCheckedAry: false, //表格选中的数据是否清空
        picArr: [],         //展示数据的数组
        headerTable: [        //table表th的数据
          { name: '序号' },
          { name: '链接名称' },
          { name: '链接地址' },
          { name: '最近修改时间' },
        ],

        showItem: 10,       //分页条下面item的数目
        allpage: 0,         //根据每页数据/总数据得到的总页数
        pageSize: 20,       //每页数据
        allDataSum: 0,      //总数据

        checkBoxShow: true,    //图片item子组件的checkBox是否展现
        checkedPicAry: [],      //存放选择图片的数组
        picDialogAddReviseShow: false,       //新增修改弹框

        msgDialogInit: {        //按钮操作结果消息弹框
          'title': '',
          'content': '',
          'btns': []
        },
        msgDialogIsShow: false,

        isRealDialogInit: {       //删除的时候确认弹框
          'title': '请确认删除',
          'content': ''
        },
        isRealDialogShow: false,

        searchStr: '',

        dialogObj: {
          title: '',          //'新增链接'
          inpName: '',        //'链接名称'
          inpUrlName: '',         //'链接地址'
          btnName: '',        //'确认新增'
          isLink: true,
          createUserId:"",
          updateUserId:'',
          src: '',
          shade: '',
          placeholder: '',         //修改的时候传入的名称
          placeholderUrl: '',      //修改的时候传入的链接地址
          id:'',
          createTime:"",
          updateTime:'',
          storeId:''
        },
        searchObj:{
          condition:[
            {"title":"链接名称","key":"name",'type':'text',"value":''},
           ],
          htmlType:"searchDefaultPublic",
        },
      }
    },
    components: {
      tableMate,
      pages,
      picDialogAddRevise,
      msgDialog,
      isRealDialog,
      SearchPublic,
    },
    methods: {
      //搜索
      searchParamsFn(searchParams){
        //console.log(this.searchObj.condition);
        this.searchStr = this.searchObj.condition[0].value;
        this.btnSearch(this.pageSize,0)
      },
      getLinkList (pageSize, pageCur){
        let pageList = {
          pageNum: pageCur,
          pageSize: pageSize
        }
        //发送ajax请求对应分页的数据
        getLinkTable(pageList).then(res => {
          /**
           * res.data = {
                data: [],             //信息数组
                elementsSum: 155      //总数
             }
             res.data.data[0] = {
                "id": "f362d864-ae10-49b4-8dc8-f136b354a1f0",   //唯一标识id
                "name": "test1",                                //链接名称
                "url": "123",                                   //链接地址
                "createUserId": "123",
                "createTime": "2018-06-22T18:06:16.0000000+08:00",
                "updateUserId": "1",
                "updateTime": "2018-06-22T19:06:16.0000000+08:00"
             }
           */

          let data = res.data.data;
          this.allpage = Math.ceil(res.data.elementsSum/pageSize);
          this.allDataSum = res.data.elementsSum;
          this.picArr = data;
        })
      },
      currentChange(current) {
        /**
         * current为分页组件传递过来的当前页,后台分页是从第0页开始
         */
        this.btnSearch(this.pageSize, current - 1);
        //分页事件发生的时候要清空保存选中的数组
        this.checkedPicAry = [];
        this.clearCheckedAry = !this.clearCheckedAry
      },
      checkedAryFn(checkedDataAry) {
        //从子组件拿到数据
        this.checkedPicAry = checkedDataAry;
      },
      btnSearch(pageSize, current) {
        //搜索功能
        const self = this;
        let data = {
          'name': this.searchStr,
          'page': current,
          'pageSize': pageSize
        }
        this.$axios.get(this.HOST+'/source/link/queryByName?name='
            +data.name
            +'&curPage='
            +data.page
            +'&pageSize='
            +data.pageSize).then(res => {
          /**
           * 应该要类似全部的接口带分页吧？
           */
          //console.log(res,'查询接口请求的数据');
          let data = res.data;
          self.allpage = Math.ceil(data.count/self.pageSize);
          self.allDataSum = data.count;
          this.picArr = data.dataList;
        })
        /*getLinkTableSearch(data).then( res => {
          /!**
           * 应该要类似全部的接口带分页吧？
          *!/
          //console.log(res,'查询接口请求的数据');
          let data = res.data;
          self.allpage = Math.ceil(data.count/self.pageSize);
          self.allDataSum = data.count;
          this.picArr = data.dataList;
        })*/
      },
      btnAdd() {
        this.picDialogAddReviseShow = !this.picDialogAddReviseShow;
        this.dialogObj = {
          title: '新增链接',          //'新增链接'
          inpName: '链接名称',        //'链接名称'
          inpUrlName: '链接地址',         //'链接地址'
          btnName: '确认新增',        //'确认新增'
          isLink: true,

          createUserId:this.isLogin().userId,
          updateUserId:'',
          src: '',
          shade: '',
          placeholder: '',         //修改的时候传入的名称
          placeholderUrl: '',      //修改的时候传入的链接地址
          id:'',
          createTime:"",
          updateTime:'',
          storeId:''
        }
      },
      btnRevise() {
        if(this.checkedPicAry.length > 0) {// 如果有选择
          this.picDialogAddReviseShow = !this.picDialogAddReviseShow;
          let item = this.checkedPicAry.pop(); //产品说多个就是最后一个的数据去修改

          //console.log(item)
          this.dialogObj = {
            title: '修改链接',          //'新增链接'
            inpName: '链接名称',        //'链接名称'
            inpUrlName: '链接地址',         //'链接地址'
            btnName: '确认修改',        //'确认新增'
            isLink: true,
            createUserId:"",
            updateUserId: this.isLogin().userId,        //修改人的id
            src: '',
            shade: '',
            placeholder: item.name,         //修改的时候传入的名称
            placeholderUrl: item.url,      //修改的时候传入的链接地址
            id: item.id,                   //唯一的id
            createTime:"",
            updateTime:'',
            storeId:''
          }
        }
        else {//没选
          this.s_alert('请选择要修改的项');
        }
      },
      btnDelete() {
        if(this.checkedPicAry.length > 0){//有选
          this.isRealDialogShow = !this.isRealDialogShow;
        }
        else { //没选
          this.s_alert('请选择要删除的项');
          // this.dialogMSG('请选择要删除的项', 1500);
        }
      },

      realDelete() {
        let ids = [];
        this.checkedPicAry.forEach(item => {
          ids.push(item.id);
        });
        //console.log(ids);
        this.$axios({
          url:  this.HOST+'/source/link/delete',
          data: ids,
          method:'post'
        })
          .then( res => {
          //清除子组件表单的数据
          this.clearFn();
          //弹出操作的结果
          let msg = '删除成功'
          this.s_alert(msg, 1500);
          // this.dialogMSG(msg, 1500);
          this.s_logwrite("宫格配置-素材链接库","删除");
        })
          .catch( err => {
            this.s_alert("删除失败！");
            //console.log(err);
          })
      },
      /**
       *弹框点击确认按钮后调用的事件
       */
      dialogSuccessFn(msg) {
        this.picDialogAddReviseShow = !this.picDialogAddReviseShow;
        //关闭弹框
        //清除子组件表单的数据
        this.clearFn();
        //弹出操作的结果
        this.s_alert(msg+"成功");
        // this.dialogMSG(msg+"成功", 1500);
      },
      dialogCloseFn(){
        //清空选择数组
        this.checkedPicAry = []
        //清空列表数据
        this.clearCheckedAry = !this.clearCheckedAry;
      },
      clearFn() {
        //清空选择数组
        this.checkedPicAry = []
        this.btnSearch(this.pageSize, 0)
        //清空列表数据
        this.clearCheckedAry = !this.clearCheckedAry;
      },
      dialogMSG(msg, time) {
        const self = this;
         //消息弹框
        this.msgDialogInit = {
          'title': msg,
        };
        this.msgDialogIsShow = true;
        setTimeout(function(){
          self.msgDialogIsShow = false;
        }, time)
      }
    },
    computed: {

    },
    created() {
      //初始化第一页数据，第一个参数每一页的数据条数，第二个参数当前第几页
      // this.getLinkList(this.pageSize, 1);
      if(!this.isLogin()){
        this.$router.push({path:"/login"});
      }
      this.btnSearch(this.pageSize, 0)
    }
  }
</script>

<style lang="scss" scoped>
  .link-lib {
    width: 100%;
    height: 100%;
    .btns-under-box {
      margin-bottom: 10px;
    }
    .picture-wrapper {
      display: flex;
      flex-wrap: wrap;
      // justify-content: space-between;
      .picture-item-wrapper {
        position: relative;
        flex: 0 0 16.6666%;
        .no-one-row {
          margin-top: 3%;
        }
      }
    }
    .table-ctrl {
      height: 100%;
      padding-bottom:86px;
    }
  }
</style>
